<template>
  <div>
    <div style="margin: 10px 0">
      <el-input
          v-model="ip"
          style="width: 200px; margin: 0 20px"
          placeholder="请输入设备ip"
          ref="ip"
          :disabled="isIpDisabled"
      />
      <el-select
          v-model="regtype"
          placeholder="请选择寄存器类型"
          clearable
          ref="regtype"
          :disabled="isRegtypeDisabled"
      >
        <el-option
            label="线圈"
            :value="0"
        ></el-option>
        <el-option
            label="离散输入"
            :value="1"
        ></el-option>
        <el-option
            label="输入寄存器"
            :value="3"
        ></el-option>
        <el-option
            label="保持寄存器"
            :value="4"
        ></el-option>
      </el-select>
      <el-input
          v-model.number="startlocation"
          style="width: 200px; margin: 0 20px"
          placeholder="请输入设备起始地址"
          ref="startlocation"
          :disabled="isStartlocationDisabled"
      />
      <el-input
          v-model.number="len"
          style="width: 200px; margin: 0 20px"
          placeholder="数量"
          ref="len"
          :disabled="isLenDisabled"
      />
      <el-button
          size="small" type="primary"
          style="margin: 0 10px"
          @click="start"
          ref="start"
          :disabled="isStartDisabled"
      >
        <i class="el-icon-connection"></i>开始
      </el-button>
      <el-button size="small"
                 type="danger"
                 style="margin: 0 10px"
                 @click="stop"
                 ref="stop"
                 :disabled="isStopDisabled"
      >
        <i class="el-icon-connection"></i>停止
      </el-button>
    </div>
    <el-table ref="table" :data="tableData"
              style="margin: 10px; width: 1600px" border stripe>
      <el-table-column type="index" label="序号" width="60">
      </el-table-column>
      <el-table-column prop="regtype" label="寄存器类型" width="150">
        <template slot-scope="scope">
          <span v-if="scope.row.regtype == 0">线圈</span>
          <span v-if="scope.row.regtype == 1">离散输入</span>
          <span v-if="scope.row.regtype == 3">输入寄存器</span>
          <span v-if="scope.row.regtype == 4">保持寄存器</span>
        </template>
      </el-table-column>
      <el-table-column prop="location" label="寄存器地址" width="200">
      </el-table-column>
      <el-table-column  prop="bvalue" label="bool" width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.bvalue !=null? (scope.row.bvalue === true ? '1' : '0'): '' }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="hex" label="十六进制" width="150">
        <template slot-scope="scope">
          <span v-if="scope.row.regtype == 3 || scope.row.regtype == 4">0x{{ scope.row.hex }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="uivalue" label="16位无符号整数" width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.uivalue }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="ivalue" label="16位整数" width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.ivalue }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="ui4value" label="32位无符号整数" width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.ui4value }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="i4value" label="32位整数" width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.i4value }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="fvalue" label="float" width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.fvalue }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import service from "@/utils/request";
import ElementUI from "element-ui";

export default {
  created() {
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  data() {
    return {
      ip: null,
      regtype: 4,
      startlocation: null,
      len: null,
      isIpDisabled: false,
      isRegtypeDisabled: false,
      isStartlocationDisabled: false,
      isLenDisabled: false,
      isStartDisabled: false,
      isStopDisabled: true,
      timer: null,
      tableData: [],
      formLabelWidth: '120px'
    }
  },
  methods: {
    load() {
      if (this.regtype == 3 || this.regtype == 4) {
        service.get('/dev/getNumberBatch', {
          params: {
            ip: this.ip,
            regtype: this.regtype,
            startlocation: this.startlocation,
            len: this.len
          }
        }).then(response => {
              this.tableData = []
              if (response.data.code == 20000) {
                this.tableData = []
                for (let i = 0; i < response.data.data.uiList.length; i++) {
                  this.tableData.push({
                    regtype: this.regtype,
                    location: this.startlocation + i,
                    hex: response.data.data.uiList[i].toString(16),
                    uivalue: response.data.data.uiList[i],
                    ivalue: response.data.data.iList[i],
                    ui4value: response.data.data.ui4List[i],
                    i4value: response.data.data.i4List[i],
                    fvalue: response.data.data.fList[i],
                  })
                }
                console.log(this.tableData)
              }
            },
            error => {
              // ElementUI.Message({
              //   message: error.message,
              //   type: 'error'
              // })
            }
        );
      } else if (this.regtype == 0 || this.regtype == 1) {
        service.get('/dev/getBoolBatch', {
          params: {
            ip: this.ip,
            regtype: this.regtype,
            startlocation: this.startlocation,
            len: this.len
          }
        }).then(response => {
              this.tableData = []
              if (response.data.code == 20000) {
                this.tableData = []
                for (let i = 0; i < response.data.data.bList.length; i++) {
                  this.tableData.push({
                    regtype: this.regtype,
                    location: this.startlocation + i,
                    bvalue: response.data.data.bList[i],
                  })
                }

              }
            },
            error => {
              // ElementUI.Message({
                    //   message: error.message,
                    //   type: 'error'
                    // })
                  }
              );

            }
      }
    ,

      start()
      {
        // this.$message('in start')
        if(this.ip==null || !this.ip.match(/^[0-9]+\.[0-9]+\.[0-9]+\.[0-9]+$/)){
          this.$message.error('请输入正确的ip')
          return
        }
        if(this.startlocation==null || !this.startlocation.toString().match(/^[0-9]+$/)){
          this.$message.error('请输入正确的起始地址')
          return
        }
        if(this.startlocation > 65535 || this.startlocation < 0){
          this.$message.error('起始地址0-65535')
          return
        }
        if(this.len==null || !this.len.toString().match(/^[0-9]+$/)){
          this.$message.error('请输入正确的数量')
          return
        }
        if(this.len > 100 || this.len <= 0){
          this.$message.error('数量0-100')
          return
        }
        if(this.startlocation==null || !this.startlocation.toString().match(/^[0-9]+$/)){
          this.$message.error('请输入正确的起始地址')
          return
        }
        if(this.startlocation > 65535 || this.startlocation < 0){
          this.$message.error('起始地址0-65535')
          return
        }


        this.isIpDisabled = true
        this.isRegtypeDisabled = true
        this.isStartlocationDisabled = true
        this.isLenDisabled = true
        this.isStartDisabled = true
        this.isStopDisabled = false
        this.load()
        this.timer = setInterval(() => {
          this.load()
        }, 1000)
      }
    ,
      stop()
      {
        this.isIpDisabled = false
        this.isRegtypeDisabled = false
        this.isStartlocationDisabled = false
        this.isLenDisabled = false
        this.isStartDisabled = false
        this.isStopDisabled = true
        clearInterval(this.timer)
        this.tableData = []
      }
    ,
    }
  }
</script>
<style scoped>

</style>
